
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test Details</title>
<!-- jQuery Mobile references -->
<link rel="stylesheet" href="css/jquery.mobile-1.4.2.min.css" />
<script src="js/jquery-2.1.0.min.js"></script>
<script src="js/jquery.mobile-1.4.2.min.js"></script>
<script type="text/javascript" src="js/utils.js"></script>
<script type="text/javascript" src="js/favourite.js"></script>
<script type="text/javascript" src="js/utils.js"></script>
<script type="text/javascript" src="js/lesson.js"></script>
<script type="text/javascript" src="js/test.js"></script>
<script type="text/javascript">
        $(document).ready(function() {
                var typeId = localStorage.getItem("testtypeid");
                var lessonID = getUrlVars()["lessonid"];
                var questionID; //Danh dau dang hien thi cau hoi la cau thu may trong mang quesstionArrayList
                var correct; //lay ve dap an dung cua dau hoi
                var numCorrect = 0; //so cau tra loi dung
                var numWrong = 0; //so cau tra loi sai
                
                getLessonTitle(lessonID).done(function(title) {
                        $('#lesson-name').append(title);
                });
                
                //lay ve nhung gia tri khac nhau trong 2 mang
                Array.prototype.diff = function(a) {
                    return this.filter(function(i) {return a.indexOf(i) < 0;});
                };
                
                //lay ve cac phan tu giong nhau trong 2 mang
                function intersection(x,y){
                         x.sort();y.sort();
                         var i=j=0;ret=[];
                         while(i<x.length && j<y.length){
                          if(x[i]<y[j])i++;
                          else if(y[j]<x[i])j++;
                          else {
                           ret.push(x[i]);
                           i++,j++;
                          }
                         }
                         return ret;
                        }
                
                function updateNumberCorrect(){
                        /* numCorrect += 1;
                $('#numcorrect').text(numCorrect); */

                var answerSelectedArr = [];
                var correctArr = [];
                for (var i = 0; i < quesstionArrayList.length; i++) {
                        console.log('Tai question thu == ' + i );
                        $.each(quesstionArrayList[i], function(attr, value) {
                                if (attr === "correct"){
                                        correctArr.push(value);
                                }
                                if (attr === "ansewerseleted") {
                                        answerSelectedArr.push(value);
                                        }
                        }); 
                }
                
                //view ra coi
                console.error('mang du lieu nhung dap an da chon');
                for (var j = 0; j < answerSelectedArr.length; j++) {
                                console.log('answerSelectedArr['+j+']' + answerSelectedArr[j]);
                        }
                console.error('mang du lieu nhung dap an dung');
                for (var j = 0; j < correctArr.length; j++) {
                                console.log('correctArr['+j+']' + correctArr[j]);
                        }
                
                //mang co cac ptu giong nhau giua answerSelectedArr vaf correctArr la
                var sameEl = intersection(correctArr, answerSelectedArr);
                $('#numcorrect').text(sameEl.length);
                }
                
                
                function updateNumberWrong(){
                         numWrong += 1;
                $('#numwrong').text(numWrong);
                }
                
                function resetNumberCorrect(){
                        numCorrect = 0 ;
                $('#numcorrect').text(numCorrect);
                }
                
        function resetNumberWrong(){
                numWrong = 0;
                $('#numwrong').text(numWrong);
                }
                
                //Kiem tra xem trong local storega co array luu cac cau hoi chua.
                //Neu chua co thi lay. -> lan dau
                //Neu co roi thi hien thi -> lan trc dang lam dang do
                var quesstionArrName = 'type'+typeId+'_leid'+lessonID+'_questionArr';
                quesstionArrayList = JSON.parse(localStorage.getItem(quesstionArrName));
                //alert('quesstionArrayList la (trc khi get - neu la lan dau) ' + JSON.stringify(quesstionArrayList));
                if (jQuery.isEmptyObject(quesstionArrayList) == true) {//trc do chua co -> gio phai luu
                        alert('thi ra la no null -> lay ve thoi');
                        getQuestionArray(typeId,lessonID);
                } 
                processTest();
                
                
                //process
                function processTest(){
                var isBreak = false; //danh dau pha vong lap
                for (var i = 0; i < quesstionArrayList.length; i++) {
                        //console.error('dang o cho nay');
                        //console.error('questionarr thu ' + i);
                        $.each(quesstionArrayList[i], function(attr, value) {
                                //console.log( attr + ' == ' + value );
                                if (attr === "ansewerseleted"){
                                        if(value === ""){ //cau hoi itemKey da co cau tra loi ->hien thi cau nay
                                                displayQuestionDetail(i,quesstionArrayList[i]);
                                                isBreak = true;
                                        }else{
                                                //console.error('questionItem ' + itemKey +'da co cau tra loi');
                                                isBreak = false;
                                        }
                                }
                        }); 
                        if (isBreak == true) {
                                if (i == 0) {//neu la cau dau tien thi disable nut previous
                                        $('#previousBtn').prop('disabled', true).addClass('ui-disabled');
                                }
                                if (i == quesstionArrayList.length -1) {//neu la cau cuoi cung thi disable nut next
                                        $('#nextBtn').prop('disabled', true).addClass('ui-disabled');
                                }
                                questionID = i;
                                        return false;
                                }
                        }//end for
            }//end function processTest()
            
            function displayQuestionDetail(questionKey,questionValue){
                $.each(questionValue, function(attr, value) {
                              //console.log( attr + ' =============== ' + value );
                              switch (attr) {
                                case "question":
                                        $('#question').text(value);
                                        break;
                                case "answer1":
                                        $('#answer1').text(value);
                                        break;
                                case "answer2":
                                        $('#answer2').text(value);
                                        break;
                                case "answer3":
                                        $('#answer3').text(value);
                                        break;
                                case "answer4":
                                        $('#answer4').text(value);
                                        break;
                                case "correct":
                                        $('#answer_correct').text(value);
                                        correct = $('#answer_correct').text();
                                        break;
                                }
                        });
                $('#numwrong').text(numWrong);
                $('#numcorrect').text(numCorrect);
                var currNumQuestion = questionKey + 1;
                $('#numquestion').text(currNumQuestion + "/" + quesstionArrayList.length);
            }

            
            function setBGCorrectAnswer(index){
                    var nameEl =  '#bganswer' + index;//le ra la cai nay
                    //var nameEl =  '#answer' + index;
                    $(nameEl).css('background','#8ec252');
                    //$(nameEl).removeAttr('style');
            }
            
            
          //cap nhat lai mau bg cua cac o dap an
            function resetBackgroundAnswers(){
                        $('#bganswer1').css('background','#ffffff');
                        $('#bganswer2').css('background','#ffffff');
                        $('#bganswer3').css('background','#ffffff');
                        $('#bganswer4').css('background','#ffffff');
            }
                
                //previous event when click previous button 
                $("#previousBtn").click(function(){
                        if (questionID > 0) {
                                questionID -= 1;
                        }
                        displayQuestionDetail(questionID,quesstionArrayList[questionID]);
                        //enableSelectAnswerEvent(); //bat chuc nang click len
                        
                        reviewQuestion();
                        //khi questionID >0 (ko phai cau dau tien) ->enable previous button
                        if (questionID > 0) {
                                //$('#previousBtn').removeAttr("disabled");
                                $('#previousBtn').removeClass('ui-disabled');
                        }
                        
                        if (questionID < quesstionArrayList.length -1) {
                                //$('#previousBtn').removeAttr("disabled");
                                $('#nextBtn').removeClass('ui-disabled');
                        }
                        
                        ////khi questionID == quesstionArrayList.length (ko phai cau dau tien) ->disable next button
                        if (questionID == 0) {
                                $('#previousBtn').prop('disabled', true).addClass('ui-disabled');
                        }
                });
                
                //next event when click next button 
                $("#nextBtn").click(function(){
                        //trc khi chuyen cau hoi. kiem tra xem cau hoi hien tai da tra loi chua.
                        //Neu tra loi roi -> luu dap an da chon vao localstorage -> cau tiep theo
                        //console.log('cau dang chay la cau thu ' + questionID);
                        if (questionID < quesstionArrayList.length - 1) {
                                questionID += 1;
                        }
                        displayQuestionDetail(questionID,quesstionArrayList[questionID]);
                        //enableSelectAnswerEvent(); //bat chuc nang click len
                        
                        reviewQuestion();
                        
                        //khi questionID >0 (ko phai cau dau tien) ->enable previous button
                        if (questionID > 0) {
                                //$('#previousBtn').removeAttr("disabled");
                                $('#previousBtn').removeClass('ui-disabled');
                        }
                        
                        ////khi questionID == quesstionArrayList.length (ko phai cau dau tien) ->disable next button
                        if (questionID == quesstionArrayList.length -1) {
                                $('#nextBtn').prop('disabled', true).addClass('ui-disabled');
                        }
                });
                
                //reset event when click reset button 
                $("#resetBtn").click(function(){
                        //1. xoa tat ca value cua answerselected trong mang questionArrayList
                        for (var i = 0; i < quesstionArrayList.length; i++) {
                        $.each(quesstionArrayList[i], function(attr, value) {
                                if (attr === "ansewerseleted"){
                                        quesstionArrayList[i].ansewerseleted = "";
                                }
                        }); 
                        }//end for
                        
                        //2. reset so dem question, wrong, correct
                        resetBackgroundAnswers();
                        resetNumberCorrect();
                        resetNumberWrong();
                        enableSelectAnswerEvent();
                        processTest();
                        
                });
                
                
                function reviewQuestion(){
                        //Neu cau hoi questionKey da dc tra loi trc do(tuc la da co answerselected) thi ->hien thi cau tra loi, cau tra loi dung (the hien bg color cho answers)
                var answerSelected =  quesstionArrayList[questionID].ansewerseleted;
                var answerCorrect =  quesstionArrayList[questionID].correct;
                //console.log('questionKey = ' + questionID);
                //console.log('answerSelected = ' + answerSelected);
                //console.log('answerCorrect = ' + answerCorrect);
                
                //alert('cau hoi thu ' + questionID + '---answerSelected =' + answerSelected + '--- answerCorrect = ' + answerCorrect);
                
                resetBackgroundAnswers();
                        //neu khi back lai la cau da tra loi roi thi khong enableSelectAnswerEvent, va resetBackgroundAnswers
                        if (quesstionArrayList[questionID].ansewerseleted === "") {//cau hoi chua tra loi
                                //cho phep click event vao o dap an khi next hay back toi cau hoi chua tra loi
                                enableSelectAnswerEvent();
                        }else{//cau hoi nay da tra loi trc do ->hien thi bg tuong ung
                                disableSelectAnswerEvent();
                                if (answerCorrect == answerSelected) {
                                setBGCorrectAnswer(answerCorrect);
                            }else{
                                //alert('---answerSelected =' + answerSelected + '--- answerCorrect = ' + answerCorrect);
                                        //gia su correct = 1, answerselected = 2
                                        switch (answerCorrect) {
                                            case "1": //dung
                                                $('#bganswer1').css('background','#8ec252');
                                                if (answerSelected == "2") {
                                                        $('#bganswer2').css('background-color','#ff0000');
                                                        $('#bganswer3').css('background-color','#ffffff');
                                                        $('#bganswer4').css('background-color','#ffffff');
                                                }else if (answerSelected == "3") {
                                                        $('#bganswer3').css('background-color','#ff0000');
                                                        $('#bganswer4').css('background-color','#ffffff');
                                                        $('#bganswer2').css('background-color','#ffffff');
                                                        }else if (answerSelected == "4") {
                                                                $('#bganswer4').css('background-color','#ff0000');
                                                                $('#bganswer2').css('background-color','#ffffff');
                                                                $('#bganswer3').css('background-color','#ffffff');
                                                        }
                                           break;
                                           case "2": //dung
                                                $('#bganswer2').css('background','#8ec252');
                                            if (answerSelected == 1) {
                                                $('#bganswer1').css('background-color','#ff0000');
                                                $('#bganswer3').css('background-color','#ffffff');
                                                $('#bganswer4').css('background-color','#ffffff');
                                        }else if (answerSelected == 3) {
                                                $('#bganswer3').css('background-color','#ff0000');
                                                $('#bganswer4').css('background-color','#ffffff');
                                                $('#bganswer1').css('background-color','#ffffff');
                                                }else if (answerSelected == 4) {
                                                        $('#bganswer4').css('background-color','#ff0000');
                                                        $('#bganswer1').css('background-color','#ffffff');
                                                        $('#bganswer3').css('background-color','#ffffff');
                                                }
                                           break;
                                          case "3": //dung
                                                $('#bganswer3').css('background','#8ec252');
                                                if (answerSelected == "1") {
                                                        $('#bganswer1').css('background-color','#ff0000');
                                                        $('#bganswer2').css('background-color','#ffffff');
                                                        $('#bganswer4').css('background-color','#ffffff');
                                                }else if (answerSelected == "2") {
                                                        $('#bganswer2').css('background-color','#ff0000');
                                                        $('#bganswer1').css('background-color','#ffffff');
                                                        $('#bganswer4').css('background-color','#ffffff');
                                                        }else if (answerSelected == "4") {
                                                                $('#bganswer4').css('background-color','#ff0000');
                                                                $('#bganswer1').css('background-color','#ffffff');
                                                                $('#bganswer2').css('background-color','#ffffff');
                                                        }
                                                break;
                                         case "4": //dung
                                                $('#bganswer4').css('background','#8ec252');
                                                if (answerSelected == "1") {
                                                        $('#bganswer1').css('background-color','#ff0000');
                                                        $('#bganswer2').css('background-color','#ffffff');
                                                        $('#bganswer3').css('background-color','#ffffff');
                                                }else if (answerSelected == "2") {
                                                        $('#bganswer2').css('background-color','#ff0000');
                                                        $('#bganswer1').css('background-color','#ffffff');
                                                        $('#bganswer3').css('background-color','#ffffff');
                                                        }else if (answerSelected == "3") {
                                                                $('#bganswer3').css('background-color','#ff0000');
                                                                $('#bganswer1').css('background-color','#ffffff');
                                                                $('#bganswer2').css('background-color','#ffffff');
                                                        }
                                                break;
                                        }
                                }
                        }
                }
                
                
                function disableSelectAnswerEvent(){
                        $("#bganswer1").unbind( "click" );
                        $("#bganswer2").unbind( "click" );
                        $("#bganswer3").unbind( "click" );
                        $("#bganswer4").unbind( "click" );
                }
                
                function enableSelectAnswerEvent(){
                        $("#bganswer1").bind("click",function eventhandler(){
                                processWhenSelectAnswer1(correct);
                        });
                        $("#bganswer2").bind("click",function eventhandler(){
                                processWhenSelectAnswer2(correct);
                        });
                        
                        $("#bganswer3").bind("click",function eventhandler(){
                                processWhenSelectAnswer3(correct);
                        });
                        $("#bganswer4").bind("click",function eventhandler(){
                                processWhenSelectAnswer4(correct);
                        });
                }
                
                function updateAnswerSelected(selected){
                        quesstionArrayList[questionID].ansewerseleted = selected;
                        //show ra de coi
                        /* $.each(quesstionArrayList[questionID], function(attr, value) {
                        console.log('dang kiem tra ' +attr + ' == ' + value );
                });   */
                }

                
                
                
                //select answer1 event
                $('#bganswer1').click(function(){
                        processWhenSelectAnswer1(correct)
                });
                
                function processWhenSelectAnswer1(correctAnswer){
                        disableSelectAnswerEvent();
                        updateAnswerSelected("1");
                        switch (correctAnswer) {
                        case "1": //dung
                                $('#bganswer1').css('background-color','#8ec252');
                            updateNumberCorrect();
                                break;
                        case "2":
                                $('#bganswer1').css('background-color','#ff0000');
                                $('#bganswer2').css('background','#8ec252');
                                updateNumberWrong();
                                break;  
                        case "3":
                                $('#bganswer1').css('background-color','#ff0000');
                                $('#bganswer3').css('background','#8ec252');
                                updateNumberWrong();
                                break;
                        case "4":
                                $('#bganswer1').css('background-color','#ff0000');
                                $('#bganswer4').css('background','#8ec252');
                                updateNumberWrong();
                                break;  
                        } 
                }
                
                
                //select answer2 event
                $('#bganswer2').click(function(){
                        processWhenSelectAnswer2(correct); 
                });
                
                function processWhenSelectAnswer2(correctAnswer){
                        disableSelectAnswerEvent();
                        updateAnswerSelected("2");
                        switch (correctAnswer) {
                        case "1": //dung
                                $('#bganswer2').css('background-color','#ff0000');
                                $('#bganswer1').css('background','#8ec252');
                                updateNumberWrong();
                                break;
                        case "2":
                                $('#bganswer2').css('background-color','#8ec252');
                                updateNumberCorrect();
                                break;  
                        case "3":
                                $('#bganswer2').css('background-color','#ff0000');
                                $('#bganswer3').css('background','#8ec252');
                                updateNumberWrong();
                                break;
                        case "4":
                                $('#bganswer2').css('background-color','#ff0000');
                                $('#bganswer4').css('background','#8ec252');
                                updateNumberWrong();
                                break;  
                        } 
                }
                
                
                //select answer3 event
                $('#bganswer3').click(function(){
                        processWhenSelectAnswer3(correct);
                });
                
                function processWhenSelectAnswer3(correctAnswer){
                        disableSelectAnswerEvent();
                        updateAnswerSelected("3");
                        switch (correct) {
                        case "1": //dung
                                $('#bganswer3').css('background-color','#ff0000');
                                $('#bganswer1').css('background','#8ec252');
                                updateNumberWrong();
                                break;
                        case "2":
                                $('#bganswer3').css('background-color','#ff0000');
                                $('#bganswer2').css('background','#8ec252');
                                updateNumberWrong();
                                break;  
                        case "3":
                                $('#bganswer3').css('background-color','#8ec252');
                                updateNumberCorrect();
                                break;
                        case "4":
                                $('#bganswer3').css('background-color','#ff0000');
                                $('#bganswer4').css('background','#8ec252');
                                updateNumberWrong();
                                break;  
                        } 
                }
                
                //select answer4 event
                $('#bganswer4').click(function(){
                        processWhenSelectAnswer4(correct);
                });
                
                function processWhenSelectAnswer4(correctAnswer){
                        disableSelectAnswerEvent();
                        updateAnswerSelected("4");
                        switch (correct) {
                        case "1": //dung
                                $('#bganswer4').css('background-color','#ff0000');
                                $('#bganswer1').css('background','#8ec252');
                                updateNumberWrong();
                                break;
                        case "2":
                                $('#bganswer4').css('background-color','#ff0000');
                                $('#bganswer2').css('background','#8ec252');
                                updateNumberWrong();
                                break;  
                        case "3":
                                $('#bganswer4').css('background-color','#ff0000');
                                $('#bganswer3').css('background','#8ec252');
                                updateNumberWrong();
                                break;
                        case "4":
                                $('#bganswer4').css('background-color','#8ec252');
                                updateNumberCorrect();
                                break;  
                        } 
                }
        });
</script>


<style type="text/css">

.answerselected{
    background-color: blue;
}

.correct{
    background-color: blue;
}

.wrong{
    background-color: read;
}

</style>

</head>
<body>

        <!-- Start  page -->
        <div data-role="page" id="add-vocabulary-page">

                <!-- header -->
                <div id="minna-header" data-role="header" style="border: none;"
                        data-theme="b" data-position="fixed">
                        <h1 id="lesson-name"></h1>
                        <a href="menu_test.html" id="btnBack" data-direction="reverse"
                                data-ajax="false"
                                class="ui-btn ui-btn-left ui-mini ui-btn-inline ui-corner-all ui-btn-icon-left ui-icon-back">Back</a>
                </div>
                <!-- /header -->

                <!-- content -->
                <div id="minna-content" data-role="content" role="main">
                        <div style="background-color: white; text-align: center;  width: 100%; margin-bottom: 20px; margin-top: 20px;">
                                <h2 id="question" style="vertical-align: middle;font-size: 48px; font-style: normal; color: #1240AB;"></h2>
                        </div>
                        
                        <div id="answers">
                                <div class="ui-grid-a">
                                        <div class="ui-block-a">
                                                <div id="bganswer1" class="ui-bar ui-bar-a"
                                                        style="height: 80px;background-color:#ffffff; text-align: center; display: table; width: 100%; ">
                                                        <p id="answer1"  style="display: table-cell; vertical-align: middle;"></p>
                                                </div>
                                        </div>
                                        <div  class="ui-block-b">
                                                <div id="bganswer2" class="ui-bar ui-bar-a"
                                                        style="height: 80px; text-align: center; background-color:#ffffff;display: table; width: 100%;">
                                                        <p id="answer2" style="display: table-cell; vertical-align: middle;"></p>
                                                </div>
                                        </div>
                                        <div  class="ui-block-a">
                                                <div id="bganswer3" class="ui-bar ui-bar-a"
                                                        style="height: 80px; text-align: center; background-color:#ffffff;display: table; width: 100%;">
                                                        <p id="answer3" style="display: table-cell; vertical-align: middle;"></p>
                                                </div>
                                        </div>
                                        <div  class="ui-block-b">
                                                <div id="bganswer4" class="ui-bar ui-bar-a"
                                                        style="height: 80px; background-color: white; text-align: center; display: table; width: 100%;">
                                                        <p id="answer4" style="display: table-cell; vertical-align: middle;"></p>
                                                </div>
                                        </div>
                                </div>
                                <span id="answer_correct" style="display: none;"></span>
                                <!-- /grid-a -->
                        </div>
                </div>
                <!-- /content -->

                <div data-role="footer" data-position="fixed">
                      <div class="ui-grid-b ui-responsive" style="background-color: rgb(205, 227, 235) !important; font-style: normal;">
                                        <div class="ui-block-b" style="text-align: right;">
                                               <!--  <span>Wrong : </span><span id="numwrong"></span> -->
                                        </div>
                                        <div style="text-align: center;" class="ui-block-c">
                                                <span id="numquestion"></span>
                                        </div>

                                        <div class="ui-block-d" style="text-align: center;">
                                               <!--  <span>Correct : </span><span id="numcorrect"></span> -->
                                        </div>

                                </div>
                        
                        <div data-role="navbar">
                                <div class="ui-grid-b ui-responsive">
                                        <div class="ui-block-b">
                                                <a id="previousBtn"
                                                        class="ui-shadow ui-btn ui-corner-all ui-icon-arrow-l ui-btn-icon-notext ui-btn-inline">previous</a>
                                        </div>
                                        <div style="text-align: center;" class="ui-block-c">
                                                <a id="resetBtn"
                                                        class="ui-shadow ui-btn ui-corner-all ui-icon-recycle ui-btn-icon-notext ui-btn-inline">reset</a>
                                        </div>

                                        <div class="ui-block-d" style="float: right;">
                                                        <a id="nextBtn"
                                                        class="ui-shadow ui-btn ui-corner-all ui-icon-arrow-r ui-btn-icon-notext ui-btn-inline">next</a>
                                        </div>
                                </div>
                        </div>
                        <!-- /navbar -->
                </div>
                <!-- /footer -->
        </div>
        <!-- /page -->
</body>
</html>